<template>
  <div class="box">
    <header class="header">
      <div class="search" @click="gosearch">
        <img src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/icons/icon_search_lightgray.png" alt="">
        <span>请输入关键词</span>
      </div>
    </header>
    <div class="content" id="content">
      <van-sidebar v-model="activeKey" @change="onChange" id="side">
        <van-sidebar-item v-for="(item, index) of typelist" :key="index" :title="item" id="sidebarColor"/>
      </van-sidebar>
      <img src="https://img.youpin.mi-img.com/youpinoper/92fc2ba8eeb05a0d25fedb065dbb2236.jpg" alt="" class="banner">
      <div class="brandBox">
        <h5>热门品牌</h5>
        <div class="brandlist" v-for="(item, index) of brandlist" :key="index" @click="toList(item.brand)">
          <div class="imgBox">
            <img :src="item.brandimg" alt="" class="brandimg">
          </div>
          <span>{{ item.brand }}</span>
        </div>
      </div>
      <div class="proBox">
        <h5 id="proH">精品推荐</h5>
        <ProlistVer :typeProList="typeProList"></ProlistVer>
      </div>
    </div>
  </div>
</template>

<script>
import ProlistVer from '@/components/prolistVer'
import Vue from 'vue'
import { NavBar, Search, Sidebar, SidebarItem, Col, Row } from 'vant'
import { getCategory, getCategoryBrand, getTypeProList } from '@/api'
Vue.use(NavBar)
Vue.use(Search)
Vue.use(Sidebar)
Vue.use(SidebarItem)
Vue.use(Col)
Vue.use(Row)
export default {
  data () {
    return {
      typelist: [], // 左侧列表
      brandlist: [],
      typeProList: [],
      activeKey: 0
    }
  },
  components: {
    ProlistVer
  },
  mounted () {
    getCategory().then(res => {
      this.typelist = res.data.data
      this.onChange(0)
    })
  },
  methods: {
    gosearch () {
      this.$router.push('/search')
    },
    toList (brand) {
      this.$router.push('/products?type=' + this.typelist[this.activeKey] + '&brand=' + brand)
    },
    onChange (index) {
      console.log(index)
      getCategoryBrand({
        type: this.typelist[index]
      }).then(res => {
        console.log(res.data.data)
        this.brandlist = res.data.data
      })
      getTypeProList({ type: this.typelist[index] }).then(res => {
        console.log(res.data.data)
        this.typeProList = res.data.data
      })
      document.getElementById('content').scrollTop = 0
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.container {
  background:#f4f4f4;
}
.header {
  background:white;
  height: 46px;
  .search {
    float: left;
    height:30px;
    width:95%;
    background:#eee;
    border-radius: 15px;
    margin:11px;
    img {
      width:20px;
      margin:5px 10px;
    }
    span {
      color:#999;
      display: inline-block;
      line-height: 30px;
    }
  }
}
.content {
  background:#f4f4f4;
}
.van-search {
  padding: 5px 12px;
  width: 400px;
}
.van-nav-bar__title {
  max-width: 80%;
}
.van-sidebar {
  float: left;
}
.brandBox {
  width:70%;
  margin-right: 4%;
  background: white;
  border-radius: 6px;
  padding-bottom: 14px;
  float: right;
  h5 {
    margin:10px;
    text-align: left;
  }
  .brandlist {
    float: left;
    overflow: hidden;
    width:80px;
    height: 100px;
    .imgBox {
      width:80px;
      height:80px;
      display:flex;
      justify-content: center;
      align-items: center;
      img {
        width:60px;
      }
    }
    span {
      display:block;
      text-align: center;
      height:20px;
      @include ellipsis(100%, 1);
      font-size: 10px;
    }
  }
}
.banner {
  width:70%;
  margin-right: 4%;
  float: right;
  border-radius: 6px;
  margin: 10px 4% 15px 0;
}
.proBox {
  width:70%;
  margin-right: 4%;
  float: right;
  margin-top: 10px;
  #proH {
    padding-left: 10px;
    margin-left: 0;
    height: 30px;
    width:100%;
    line-height: 30px;
    border-radius: 6px;
    background: white;
    text-align: left;
  }
}
#side {
  position: fixed;
  background:white;
}
#sidebarColor {
   color:black;
}
</style>
